<script lang="ts" setup>
import type { OrderItem } from '@/types/api/order'
import type { Ref } from 'vue'
import { orderApi } from '@/request/api'
import { useHideLoading, useLoading, useNavBack, useRouteGuard, useToast } from '@/utils'
import { onLoad } from '@dcloudio/uni-app'
import { to } from 'await-to-js'
import { isNil } from 'lodash-es'
import { computed, ref } from 'vue'
import { enum as zenum, object as zobject, string as zstring } from 'zod'

const oid = ref() as Ref<number>
const type = ref() as Ref<'cancel' | 'refund'>
const detail = ref() as Ref<OrderItem>
const content = ref('')
const title = computed(() => {
  return {
    cancel: '取消订单',
    refund: '申请退款',
  }[type.value]
})

onLoad(async (query) => {
  const zparse = zobject({
    oid: zstring().regex(/^\d+$/).transform(Number),
    type: zenum(['cancel', 'refund']),
  }).safeParse(query)
  if (!zparse.success) {
    return await useRouteGuard()
  }
  oid.value = zparse.data.oid
  type.value = zparse.data.type

  uni.setNavigationBarTitle({
    title: title.value,
  })

  getDetail()
})

async function getDetail() {
  const [err, res] = await to(orderApi.detail(oid.value))
  if (err) {
    return
  }
  detail.value = res
}

async function handleSubmit() {
  const zparse = zobject({
    cont: zstring().trim().min(1, { message: '请填写内容' }),
  }).safeParse({
    cont: content.value,
  })
  if (!zparse.success) {
    return useToast(zparse.error.issues[0].message)
  }

  if (type.value === 'cancel') {
    useLoading(true)
    const [err] = await to(orderApi.canOrder(oid.value, zparse.data))
    useHideLoading()
    if (err) {
      return
    }
  }
  else if (type.value === 'refund') {
    useLoading(true)
    const [err] = await to(orderApi.cancelcanOrder(oid.value, zparse.data))
    useHideLoading()
    if (err) {
      return
    }
  }
  useToast('成功', { icon: 'success' })
  uni.$emit('refreshOrderDetail')
  useNavBack()
}
</script>

<template>
  <view v-if="!isNil(detail)" class="min-h-100vh flex flex-col">
    <view class="flex-1">
      <view class="px-30px py-20px">
        <!--  -->
        <view class="mt-10px rd-16px bg-white p-20px">
          <view class="flex items-center pl-10px text-24px">
            <view class="text-#3">订单编号</view>
            <view class="ml-10px text-#6">{{ detail.ordercode }}</view>
          </view>
          <view class="mt-24px flex items-start">
            <image class="h-200px w-200px shrink-0 rd-20px bg-gray-50" :src="detail.params.image" mode="aspectFit"></image>
            <view class="ml-16px flex flex-col py-10px">
              <view class="text-30px text-#3 lh-35px">{{ detail.params.title }}</view>
              <view class="grid grid-cols-[auto_1fr] mt-15px gap-x-10px gap-y-10px text-24px">
                <view class="text-#6a">已选:</view>
                <view class="text-#3 routine-lh">{{ detail.params.detail }}</view>
                <view class="text-#6a">总租金:</view>
                <view class="text-theme-red">¥&thinsp;{{ (detail.params.model.price / 100).toFixed(2) }}</view>
                <view class="text-#6a">实付款:</view>
                <view class="text-theme-red">¥&thinsp;{{ (detail.params.deposit / 100).toFixed(2) }}</view>
                <view class="text-#6a">数量:</view>
                <view class="text-theme-red">{{ detail.num }}</view>
              </view>
            </view>
          </view>
        </view>

        <!--  -->
        <view class="mt-10px rd-16px bg-white px-20px pb-20px">
          <view class="pl-10px text-28px text-#3 lh-70px form-item-important-mark">原因</view>
          <view class="h-300px rd-16px bg-#F4F5F9 p-15px">
            <textarea v-model="content" class="h-full text-28px" :placeholder="`请输入${title}的原因`"></textarea>
          </view>
        </view>
      </view>
    </view>

    <view class="fixed bottom-0 w-full flex bg-white pt-15px safe-pb-15px">
      <view class="btn-primary-black mx-a w-600px text-36px lh-80px" @click="handleSubmit">提交</view>
    </view>
  </view>
</template>

<style lang="less" scoped></style>
